<%--suppress ALL --%>
<%--suppress HtmlRequiredAltAttribute --%>
<%--suppress HtmlFormInputWithoutLabel --%>
<%--
  Created by IntelliJ IDEA.
  User: kingry lee
  Date: 2019/12/23
  Time: 17:04
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>详情页</title>
    <link type="text/css" rel="stylesheet" href="css/style.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
    <script type="text/javascript" src="js/jquery.jqzoom.js"></script>
    <script type="text/javascript" src="js/base.js"></script>

</head>
<body>
<script>
    $(function(){
        $('.nav_left').mouseover(function(){

            $('.category_ho').show();
        }).mouseout(function(){
            $('.category_ho').hide();
        });
    });

    // 判断购物车是否添加成功
    if ("${param.ok}" != "")
        if (+"${param.ok}" == 1) {
            alert("添加成功~");

        } else if (+"${param.ok}" == 0) {
            alert("添加失败！")
        }

</script>

<%--加入购物车的表单信息--%>
<form action="${pageContext.request.contextPath}/book?method=cart" id="form5" method="post">
    <input type="hidden" name="userId" value="${sessionScope.user.userId}">
    <input type="hidden" name="bookId" value="${sessionScope.book.id}">
    <input type="hidden" name="bookImg" value="${sessionScope.book.img}">
    <input type="hidden" name="bookPrice" value="${sessionScope.book.price * sessionScope.book.discount}">
    <input type="hidden" name="bookName" value="${sessionScope.book.name}">
    <input type="hidden" name="bookCount" id="hi-c">
</form>
<!--top begin -->
<div class="header">

    <div class="header_1">
        <div class="warp">
            <div class="header_1_l">
                欢迎光临购书网！
                <%--suppress ELValidationInJSP --%>
                <c:if test="${sessionScope.user != null}">
                    <%--suppress ELValidationInJSP, CheckImageSize --%>
                    <img src="${pageContext.request.contextPath}/upload/${sessionScope.user.picture}" width="21" alt="头像">
                    <%--suppress ELValidationInJSP --%>
                    <a href="">${sessionScope.user.nickname}</a>
                </c:if>
                <%--suppress ELValidationInJSP --%>
                <c:if test="${sessionScope.user == null}">
                    <a href="login.jsp">请登陆</a>
                </c:if>
                <a href="register.jsp" target="_blank">免费注册</a>
                <a href="${pageContext.request.contextPath}/user?method=exit">退出登入</a>
            </div>
            <div class="header_1_r">
                <ul>
                    <li><a href="${pageContext.request.contextPath}/order?method=query&id=${sessionScope.user.userId}">我的订单</a></li>
                    <li><a href="buy.jsp" target="_blank">购物车<span id="carts" class="red">${sessionScope.cart.size()}</span>件</a></li>
                    <li><a href="">帮助中心</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!--logo &s begin -->
    <div class="header_2">
        <div class="logo"></div>
        <div class="srarching">
            <div class="srarching_t">
                <form action="${pageContext.request.contextPath}/book">
                    <input type="hidden" name="method" value="name">
                    <input name="search" type="text" class="search_txt" value="输入你要搜索的书籍名称" onfocus="if(this.value=='输入你要搜索的书籍名称'){this.value='';}"  onblur="if(this.value==''){this.value='输入你要搜索的书籍名称';}"/>
                    <input type="submit" class="search_bt" value="搜索"/>
                </form>
            </div>
            <div class="srarching_b">
                热门搜索：
                <a href="">外语考试</a>
                <a href="">中小学教辅</a>
                <a href="">百科全书</a>
                <a href="">辞典</a>
                <a href="">牛津系列</a>
                <a href="">汉语工具书</a>
                <a href="">英语工具书</a>
            </div>
        </div>
        <div class="ewm"><img src="img/ewm.jpg" width="92" height="92" /></div>

    </div>
    <!--logo &s end -->
    <!--nav begin -->
    <div class="nav">
        <div class="warp">
            <div class="nav_left">

                全部分类
                <div class="category_ho">
                    <dl>
                        <dt><a href="">小学</a></dt>
                        <dd>
                            <a href="">小学一年级</a>
                            <a href="">小学二年级</a>
                            <a href="">小学三年级</a>
                            <a href="">小学四年级</a>
                            <a href="">小学五年级</a>
                            <a href="">小学六年级</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="">初中</a></dt>
                        <dd>
                            <a href="">初中一年级</a>
                            <a href="">初中二年级</a>
                            <a href="">初中三年级</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="">高中</a></dt>
                        <dd>
                            <a href="">高中一年级</a>
                            <a href="">高中二年级</a>
                            <a href="">高中三年级</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="">教育</a></dt>
                        <dd>
                            <a href="">教材</a>
                            <a href="">外语考试</a>
                            <a href="">中小学教辅</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="">工具书</a></dt>
                        <dd>
                            <a href="">汉语工具书</a>
                            <a href="">英语工具书</a>
                            <a href="">其他语种工具</a>
                            <a href="">百科全书</a>
                            <a href="">文学鉴赏</a>
                            <a href="">辞典</a>
                            <a href="">牛津系列</a>
                            <a href="">朗文系列种工具</a>
                            <a href="">民族语工具书</a>
                            <a href="">英文原版书</a>
                        </dd>
                    </dl>
                    <dl class="last">
                        <dt><a href="">期刊</a></dt>
                        <dd></dd>
                    </dl>
                </div>

            </div>
            <div class="nav_right">
                <ul>
                    <li><a href="index.jsp">首页</a></li>
                    <li><a href="">促销优惠</a></li>
                    <li><a href="buy.jsp">购物车</a></li>
                    <li><a href="${pageContext.request.contextPath}/order?method=query&id=${sessionScope.user.userId}">我的订单</a></li>
                    <li><a href="">个人中心</a></li>
                    <li><a href="">客户服务</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!--nav end -->
    <div class="clearfloat"></div>
</div>
<!--top end -->
<!--container begin -->
<div class="container">
    <!--banner begin -->
    <div class="list_banner"><a href="" target="_blank"><img src="img/list_banner.jpg" width="1100" height="92" /></a></div>
    <!--banner end -->
    <!--left begin -->
    <div class="xq_left">
        <div class="xq_left_dq"><a href="" target=""> 购书网</a> > <a href="" target=""> 图书</a> ><a href="" target="">  中小学教辅</a> > 小学一年级 </div>
        <!--book begin -->
        <div class="xq_book">
            <div class="books">
                <%--suppress HtmlUnknownAttribute --%>
                <div id="preview" class="spec-preview"> <span class="jqzoom"><img jqimg="../upload/${sessionScope.book.img}" src="../upload/${sessionScope.book.img}" width="350" alt=""/></span> </div>
                <!--缩图开始-->
                <div class="spec-scroll"> <a class="prev"></a> <a class="next"></a>
                    <div class="items">
                        <ul>
                            <li><img alt="" bimg="../upload/${sessionScope.book.img}" src="../upload/${sessionScope.book.img}" onmousemove="preview(this);"></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- xinxi begin -->
            <div class="books_info">
                <h1>${sessionScope.book.name}</h1>
                <div class="info">
                    <dl>
                        <dt>优&nbsp;&nbsp;惠&nbsp;&nbsp;价</dt>
                        <dd><b class="price_s">￥${sessionScope.book.price * sessionScope.book.discount}</b><span class="red">（${sessionScope.book.discount}折）</span></dd>
                    </dl>
                    <dl>
                        <dt>定&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价</dt>
                        <dd><del>￥${sessionScope.book.price}</del></dd>
                    </dl>
                    <dl>
                        <dt>时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;段</dt>
                        <dd>
                            <form id="form1" name="form1" method="post" action="">

                                <label>
                                    <input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_0" />
                                    单期</label>
                                <label>
                                    <%--suppress XmlDuplicatedId --%>
                                    <input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_1" />
                                    半年</label>
                                <label>
                                    <%--suppress XmlDuplicatedId --%>
                                    <input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_1" />
                                    全年</label>

                            </form>
                        </dd>
                    </dl>
                    <dl>
                        <dt>购买数量</dt>
                        <dd>
                            <div class="wrap-input">
                                <a onclick="decC()" class="btn-reduce">减少数量</a>
                                <a onclick="addC()" class="btn-add">增加数量</a>
                                <input value="1" id="buy-num" class="text">
                            </div>
                        </dd>
                    </dl>
                    <dl>
                        <dt>库&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;存</dt>
                        <dd><span class="red">n</span>件</dd>
                    </dl>
                    <dl>
                        <dt>运&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费</dt>
                        <dd>￥10.00 <a href="" target="_blank" class="red">&nbsp;&nbsp;配送说明</a></dd>
                    </dl>
                </div>
                <!--dapei begin -->
                <div class="dapei">
                    <div class="dapei_l">搭配可选</div>
                    <div class="dapei_r">
                        <ul>
                            <li>
                                <%--<div class="dapei_rli1"><a href="" target="_blank" ><img src="../img/xq_03.jpg" width="72" height="86" /></a></div>
                                <div class="dapei_rli2"><a href="" target="_blank" >英语资料</a></div>
                                <div class="dapei_rli3"><input name="checkbox1" type="checkbox" value="" class="check1"/>￥38.04</div>--%>
                            </li>

                        </ul>
                    </div>
                </div>
                <!--dapei end -->
                <div class="book_but">
                    <div class="book_but1"><a href="">立即购买</a></div>
                    <div class="book_but2"><a href="javascript:void(0)" onclick="tj()"><i></i>加入购物车</a></div>
                </div>

            </div>
            <!-- xinxi end -->

        </div>
        <!--book end -->
        <!--book 详情 begin -->
        <div class="book_xq">
            <div class="book_xq_t">商品详情</div>
            <div class="book_xq_b">
                <%--君伟上小学（全6册）点击进入
                “江湖”上传言超级厉害的一套书哦……儿童校园幽默小说经典之作，畅销台湾20年！
                爆笑、幽默的故事是她写的——台湾童书天后王淑芬——手工书达人、让人哭让人笑的《我是白痴》的作者哦~
                巨萌、巨可爱的插图是他画的——绘本天王赖马——《我变成一只喷火龙了》《早起的一天》的作者哦~，喜欢在绘本故事里搞怪的赖马，为了画这些插图去
                了学校、找了小模特拍照，可是相当认真啊。
                这套书的除了图文精彩无比之外，图书内容的互动也很好玩：比如，从二年级起，每一篇故事的前面或者后面都附有本篇故事人物的各种爆笑吐糟，真是让
                人从头笑到尾……
                内容推荐
                　　我要读一年级了！一年级很了不起哦，我们会上厕所课，还要带午餐，而且，还有大姐姐教我们念：“蜘蛛为蜘蛛，不蜘喂不蜘，四只也。”
                　　我们一年级最鲜最酷了！
                作者简介
                1961年出生的金牛座。毕业于台湾师范大学教育系，是一位爱孩子、爱阅读、爱写作的可爱老师，作品曾获台湾中华儿童文学奖、信谊幼儿文学奖首奖等，
                已出书四十余本，含小说、散文、诗歌、童话等各种体裁。包括：《君伟上小学》、《我是白痴》《老师的童年往事》，《童年忏悔录》，《为什么、为什
                么不》，《立体手工书》，《手工书达人》，《王淑芬妙点子故事集》系列，《抢救阅读55招》，《月亮是绿色的》等。王淑芬的文笔生动，有一种贴近儿
                童的天然的幽默感。--%>

                ${sessionScope.book.details}
            </div>
        </div>
        <!--book 详情 end -->
        <!--pinglun begin -->
        <div class="evaluate">

            <div class="evaluate_2">
                <span class="more"><a href="">查看全部评论>></a></span>
                <ul class="tabbtn_3" id="normaltab_3">
                    <li class="current"><a href="">评论(${sessionScope.remarks.size()})</a></li>

                </ul><!--tabbtn end-->
                <div class="tabcon_3" id="normalcon_3">
                    <div class="sublist_3">
                        <ul style="padding-bottom:20px;">
                            <c:forEach var="remark" items="${sessionScope.remarks}">

                                <li>
                                    <div class="people_pic">
                                        <img src="../upload/${remark["PICTURE"]}">
                                        <p>${remark["NICKNAME"]}</p>
                                    </div>
                                    <div class="pl_txt">
                                        <div class="pl_txt_1"><img src="img/star${remark["RANK"]}.png" width="68" height="13" /></div>
                                        <div class="pl_txt_2">
                                            <p>心得：<b>${remark["CONTENT"]}</b></p>
                                            <p style="text-indent:3em;">${remark["REMARK"]}</p>
                                            <p style="text-indent:3em;">购买日期：${remark["BUY"]}</p>

                                        </div>

                                    </div>
                                </li>
                            </c:forEach>
                        </ul>
                    </div><!--tabcon end-->

                </div><!--tabbox end-->
            </div>
            <script type="text/javascript" src="js/jquery.tabso_yeso.js"></script>
            <script type="text/javascript">
                $(document).ready(function($){

                    //默认选项卡切换
                    $("#normaltab_3").tabso({
                        cntSelect:"#normalcon_3",
                        tabEvent:"mouseover",
                        tabStyle:"normal"
                    });

                });
            </script>
        </div>
        <!--pinglun end -->
    </div>
    <!--left end -->

    <!--right begin -->
    <div class="xq_right">
        <!--hot begin -->
        <div class="hot_books">
            <div class="hot_books_t">热销排行</div>
            <div class="hot_books_b">
                <ul>
                    <c:forEach var="book" items="${sessionScope.hot}" varStatus="v">
                        <c:if test="${v.count < 5}">
                        <li>
                            <div class="p-img"><a href="${pageContext.request.contextPath}/book?method=query&id=${book.id}" target="_blank">
                                <img src="${pageContext.request.contextPath}/upload/${book.img}" width="100" height="100" /></a></div>
                            <div class="p-name">${book.name}</div>
                            <div class="p-price">
                                <strong>￥${book.price}</strong>
                                <span class="zhe">${book.discount}</span>
                            </div>
                        </li>
                        </c:if>
                    </c:forEach>

                </ul>
            </div>
        </div>
        <!--hot end -->
        <!--other begin -->
        <div class="hot_books">
            <div class="hot_books_t">购买本书的还买了</div>
            <div class="hot_books_b">
                <ul>
                    <c:forEach var="book" items="${sessionScope.hot}" varStatus="v">
                        <c:if test="${v.count >= 5}">
                            <li>
                                <div class="p-img"><a href="${pageContext.request.contextPath}/book?method=query&id=${book.id}" target="_blank">
                                    <img src="${pageContext.request.contextPath}/upload/${book.img}" width="100" height="100" /></a></div>
                                <div class="p-name">${book.name}</div>
                                <div class="p-price">
                                    <strong>￥${book.price}</strong>
                                    <span class="zhe">${book.discount}</span>
                                </div>
                            </li>
                        </c:if>
                    </c:forEach>

                </ul>
            </div>
        </div>
        <!--other end -->
    </div>
    <!--right end -->
</div>
<!--container end -->
<!--footer begin -->
<div class="footer">
    <div class="footer_t">
        <ul>
            <li><a href=""><img src="img/f1.jpg" width="130" height="52" /></a></li>
            <li><a href=""><img src="img/f2.jpg" width="130" height="52" /></a></li>
            <li><a href=""><img src="img/f3.jpg" width="130" height="52" /></a></li>
            <li class="last"><a href=""><img src="img/f4.jpg" width="130" height="52" /></a></li>
        </ul>
    </div>
    <div class="footer_b">
        <div class="footer_b1 tb1">
            <span class="f_title">购物指南</span>
            <ul>
                <li><a href="" target="_blank">购物流程</a></li>
                <li><a href="" target="_blank">发票制度</a></li>
                <li><a href="" target="_blank" >账户管理</a></li>
                <li><a  href="" target="_blank">会员优惠</a></li>
            </ul>
        </div>
        <div class="footer_b1 tb2">
            <span class="f_title">支付方式</span>
            <ul>
                <li><a href="" target="_blank">货到付款</a></li>
                <li><a href="" target="_blank" >网上支付</a></li>
                <li><a href="" target="_blank" >银行转账</a></li>
                <li><a  href="" target="_blank">账户余额</a></li>
            </ul>
        </div>
        <div class="footer_b1 tb3">
            <span class="f_title">支付方式</span>
            <ul>
                <li><a href="" target="_blank">订单状态说明</a></li>
                <li><a href="" target="_blank" >订单取消操作</a></li>
                <li><a href="" target="_blank" >订单配送说明</a></li>
            </ul>
        </div>
        <div class="footer_b1 tb4">
            <span class="f_title">配送方式</span>
            <ul>
                <li><a href="" target="_blank">配送时间及运费</a></li>
                <li><a href="" target="_blank" >验货与签收</a></li>
                <li><a href="" target="_blank" >订单配送查询</a></li>
            </ul>
        </div>
        <div class="footer_b1 tb5">
            <span class="f_title">退换货</span>
            <ul>
                <li><a href="" target="_blank">退换货政策</a></li>
                <li><a href="" target="_blank" >退换货流程</a></li>
                <li><a href="" target="_blank" >退换货申请</a></li>
                <li><a href="" target="_blank" >退款说明</a></li>
            </ul>
        </div>
        <div class="footer_b1 tb6">
            <span class="f_title">商家服务</span>
            <ul>
                <li><a href="" target="_blank">常见问题</a></li>
                <li><a href="" target="_blank" >找回密码</a></li>
                <li><a href="" target="_blank" >汇款单招领</a></li>
                <li><a href="" target="_blank" >联系客服</a></li>
            </ul>
        </div>
    </div>
    <div class="footer_m">
        <div class="footer_nav">
            <a href="" target="_blank">关于我们</a>|
            <a href="" target="_blank">联系我们</a>|
            <a href="" target="_blank">人才招聘</a>|
            <a href="" target="_blank">广告服务</a>|
            <a href="" target="_blank">友情链接</a>|
            <a href="" target="_blank">销售联盟</a>|
            <a href="" target="_blank">公司简介</a>
        </div>
        <div class="footer_copyright">
            网络文化经营许可证鄂网文[2015]0278-060号  Copyright © 2015-2018  版权所有
        </div>
    </div>

</div>
<!--footer end -->
<script>

    // 增加购买商品数量
    function addC() {
        var n = document.getElementById("buy-num");
        n.value = +n.value + 1;

    }

    // 减少购买商品数量
    function decC() {
        var n = document.getElementById("buy-num");
        // 最低1件
        if (+n.value > 1) n.value = +n.value - 1;

    }

    // 提交隐藏表单
    function tj() {
        var n = document.getElementById("buy-num");
        document.getElementById("hi-c").value = +n.value;
        var f = document.getElementById("form5");
        f.submit();
    }

</script>

</body>
</html>